<template>
<el-container>
  <el-header style="background-color: white;color:black">
      <h1 align="center">在线考试</h1>
  </el-header>
  <el-main>
           <div align="center">
                  <h1>
                    试卷名称:{{paper.paperName}}
                    试卷总分:{{paper.paperScore}}
                    试卷时长:{{myTime}}
                   </h1>
            </div>

          <h1>一:单选题</h1>
          <template v-for="(x,index) in signList">
            <el-card class="box-card">
                <div class="clearfix" slot="header">
                    <span>{{index+1}}:{{x.quContent}}</span>
                </div>
                <div class="text item">
                    A:<input type="radio" :name="'s'+index"  value="A">{{x.quAoption}}
                </div>
                <div class="text item">
                    B:<input type="radio" :name="'s'+index"  value="B">{{x.quBoption}}
                </div>
                <div class="text item">
                    C:<input type="radio" :name="'s'+index"  value="C">{{x.quCoption}}
                </div>
                <div class="text item">
                    D:<input type="radio" :name="'s'+index"  value="D">{{x.quDoption}}
                </div>
            </el-card>
            <br>
        </template>

        <h1>二:多选题</h1>
          <template v-for="(x,index) in moreList">
            <el-card class="box-card">
                <div class="clearfix" slot="header">
                    <span>{{index+1}}:{{x.quContent}}</span>
                </div>
                <div class="text item">
                    A:<input type="checkbox" :name="'m'+index" value="A">{{x.quAoption}}
                </div>
                <div class="text item">
                    B:<input type="checkbox" :name="'m'+index" value="B">{{x.quBoption}}
                </div>
                <div class="text item">
                    C:<input type="checkbox" :name="'m'+index" value="C">{{x.quCoption}}
                </div>
                <div class="text item">
                    D:<input type="checkbox" :name="'m'+index" value="D">{{x.quDoption}}
                </div>
            </el-card>
            <br>
        </template>

        <h1>三:判断题</h1>
          <template v-for="(x,index) in judgeList">
            <el-card class="box-card">
                <div class="clearfix" slot="header">
                    <span>{{index+1}}:{{x.quContent}}</span>
                </div>
                <div class="text item">
                    √:<input type="radio" :name="'j'+index" value="√">
                </div>
                <div class="text item">
                    ×:<input type="radio" :name="'j'+index" value="×">
                </div>

            </el-card>
            <br>
        </template>
          <div align="center">
                <el-button type="success" size="mini" @click="submit">提交试卷</el-button>
          </div>


  </el-main>
</el-container>

</template>

<script>
    export default {
          name:"paperExam",
          data(){
              return{
                  paper:{},//试卷对象
                  signList:[],
                  moreList:[],
                  judgeList:[],
                  sAnswer:"",
                  myTime:10,//时长


              }
          },
          methods:{
              showPaper(name){//考试
                  //清空
                  this.signList=[];
                  this.moreList=[];
                  this.judgeList=[];

                  var self = this;
                  var http =this.$http.get("/paper/showPaper",{params:{"name":name}});
                  http.then(function(rs){
                      if(rs.data.success){
                           self.paper = rs.data.data;
                           for(var i=0;i<self.paper.list.length;i++){
                                if(self.paper.list[i].quType=="单选题"){
                                    self.signList.push(self.paper.list[i]);
                                }else if(self.paper.list[i].quType=="多选题"){
                                    self.moreList.push(self.paper.list[i]);
                                }else{
                                   self.judgeList.push(self.paper.list[i]);
                                }
                           }


                      }
                  })
              },
              submit(){//提交试卷

                  //获取单选题
                  var s="";
                  for(var i=0;i<this.signList.length;i++){
                     s+=$("input[name='s"+i+"']:checked").val()+",";
                  }
                  console.log(s);
                  //获取判断题
                  var j="";
                  for(var i=0;i<this.judgeList.length;i++){
                     j+=$("input[name='j"+i+"']:checked").val()+",";
                  }
                  console.log(j);

                  //获取多选题
                  var m="";
                  for(var i=0;i<this.moreList.length;i++){
                      var mm="";
                     $("input[name='m"+i+"']:checked").each(function(){
                            mm+=$(this).val();
                     })
                     if(mm==""){
                       mm="undefined"
                     }
                     m+=mm+",";

                  }
                  console.log(m);


              },
              countTime(){//计时考试
                   var self = this;
                   var time = setInterval(function(){
                      self.myTime--;
                      if(self.myTime==5){
                          self.$message("你还有5秒钟时间就到考试时间了");
                      }
                      if(self.myTime==0){
                        //提交试卷
                        self.submit();
                        //删除计时器
                        clearInterval(time);
                      }

                   },1000)

              }

          },
          mounted(){
            this.showPaper('java测试02');
            this.countTime();

          }
    }
</script>

<style>
</style>
